<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <meta charset="utf-8">
    <title>表单录入</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css">
    <link rel="stylesheet" type="text/css" href="../js/layer/theme/default/layer.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/config.js"></script>
    <script type="text/javascript" src="../js/layer/layer.js"></script>
  </head>
  <body>
  	<form onsubmit="return sendForm()">
  	<div class="panel">
  		<div class="title">开票信息</div>
  		<div class="box">
  			<div class="cell">
  				<!-- <input type="hidden" name="billId" value=""> -->
  				<div class="inline-div"><label><span class="red">*</span>发票开具日期</label><input type="date" name="billDate" required></div>
  				<div class="inline-div"><label><span class="red">*</span>发票代码</label><input type="text" name="billCode" required></div>
  				<div class="inline-div"><label><span class="red">*</span>发票号码</label><input type="text" name="billNo" required></div>
  				<div class="inline-div"><label><span class="red">*</span>发票金额(元)</label><input type="text" name="billPrice" required></div>
  			</div>
  			<div class="cell">
          <div class="inline-div"><label><span class="red">*</span>机动车车架号</label><input type="text" name="billCarVin" pattern="^([0-9A-Z]){17}$" oninput="checkVin(this)" maxlength="17" required></div>
  				
  				<div class="inline-div"><label><span class="red">*</span>号牌</label>
  				<select style="width: 60px;margin-right: 0px;" name="billCarPlateHead">
  					<option value="京">京</option>
  					<option value="津">津</option>
  					<option value="冀">冀</option>
  					<option value="晋">晋</option>
  					<option value="蒙">蒙</option>
  					<option value="辽">辽</option>
  					<option value="吉">吉</option>
  					<option value="黑">黑</option>
  					<option value="浙">浙</option>
  					<option value="皖">皖</option>
  					<option value="闽">闽</option>
  					<option value="赣">赣</option>
  					<option value="鲁">鲁</option>
  					<option value="豫">豫</option>
  					<option value="鄂">鄂</option>
  					<option value="湘">湘</option>
  					<option value="粤">粤</option>
  					<option value="桂">桂</option>
  					<option value="琼">琼</option>
  					<option value="川">川</option>
  					<option value="贵">贵</option>
  					<option value="云">云</option>
  					<option value="渝">渝</option>
  					<option value="藏">藏</option>
  					<option value="陕">陕</option>
  					<option value="甘">甘</option>
  					<option value="青">青</option>
  					<option value="宁">宁</option>
  					<option value="新">新</option>
  					<option value="港">港</option>
  					<option value="澳">澳</option>
  					<option value="台">台</option>
  				</select>
  				-
  				<select style="width: 60px;margin-right: 0px;margin-left: 0px;" name="billCarPlateMiddle">
  					<option value="A">A</option>
  					<option value="B">B</option>
  					<option value="C">C</option>
  					<option value="D">D</option>
  					<option value="E">E</option>
  					<option value="F">F</option>
  					<option value="G">G</option>
  					<option value="H">H</option>
  					<option value="J">J</option>
  					<option value="K">K</option>
  					<option value="L">L</option>
  					<option value="M">M</option>
  					<option value="N">N</option>
  					<option value="P">P</option>
  					<option value="Q">Q</option>
  					<option value="R">R</option>
  					<option value="S">S</option>
  					<option value="T">T</option>
  					<option value="U">U</option>
  					<option value="V">V</option>
  					<option value="W">W</option>
  					<option value="X">X</option>
  					<option value="Y">Y</option>
  					<option value="Z">Z</option>
  				</select>
  				-
  				<input type="text" name="billCarPlateCode" required></div>
  				<div class="inline-div"><label>机动车发动机号</label><input type="text" name="billCarEngineNo"></div>
  			</div>
  			<div class="cell">
  				<div class="inline-div"><label><span class="red">*</span>厂牌</label><input type="text" name="billCarMark" required></div>
  				<div class="inline-div"><label><span class="red">*</span>车辆名称</label><input type="text" name="billCarName" required></div>
  				<div class="inline-div"><label>车辆类型</label>
  				<select name="carTypeId" id="carTypeSelect">
  				</select></div>
  			</div>
  			<div class="cell">
          <div class="inline-div"><span class="red">*</span><label>品牌车系</label><input type="text" readonly name="" placeholder="请选择品牌车系" class="brand-input"></div>
          <input type="hidden" class="brandId-input" name="brandId">
          <input type="hidden" class="seriesId-input" name="seriesId">
          <input type="hidden" class="modelId-input" name="modelId">
          <div class="inline-div"><label>车身颜色</label>
          <select name="billCarColor">
            <option value="黑色">黑色</option>
            <option value="白色">白色</option>
            <option value="红色">红色</option>
            <option value="紫色">紫色</option>
            <option value="银灰色">银灰色</option>
            <option value="绿色">绿色</option>
            <option value="黄色">黄色</option>
            <option value="深灰色">深灰色</option>
            <option value="棕色">棕色</option>
            <option value="香槟色">香槟色</option>
            <option value="橙色">橙色</option>
            <option value="蓝色">蓝色</option>
            <option value="其他">其他</option>
          </select></div>
        </div>
        <div class="cell">
          <div class="inline-div"><label>所属市场</label>
            <select id="marketSelect" name="marketId">
              <option value="">请选择</option>
            </select>
          </div>
          <div class="inline-div"><label>所属商家</label>
          <select id="shopSelect" name="shopId">
            <option value="">请选择</option>
          </select></div>
        </div>
  			<div class="cell">
  				<div class="inline-div"><span class="red">*</span><label>转入地车管所</label>
  				<select style="margin-right: 0px;" id="provinceSelect" name="provinceId">
  					<option value="">请选择</option>
  				</select>
  				 - 
  				 <select id="citySelect" style="margin-left: 0px;" name="cityId">
  				 	<option value="">请选择</option>
  				 </select>
  				<input type="text" name="billDMV"></div>
  			</div>
  			
  		</div>
  	</div>
  	<div class="panel">
  		<div class="title">开票补充信息</div>
  		<div class="box">
        <div class="cell">
          <div class="inline-div"><label>买方单位／个人</label><input type="text" name="billBuyerName">
          <label>单位代码／身份证号码</label><input type="text" name="billBuyerNo"></div>
          <div class="inline-div"><label>买方单位／个人住址</label><input type="text" name="billBuyerAddress">
          <label style="min-width: 40px;">电话</label><input type="text" name="billBuyerMobile" pattern="^((0\d{2,3}-\d{7,8})|(1\d{10}))$"></div>
        </div>
        <div class="cell">
          <div class="inline-div"><label>卖方单位／个人</label><input type="text" name="billSellerName">
          <label>单位代码／身份证号码</label><input type="text" name="billSellerNo"></div>
          <div class="inline-div"><label>卖方单位／个人住址</label><input type="text" name="billSellerAddress">
          <label style="min-width: 40px;">电话</label><input type="text" name="billSellerMobile" pattern="^((0\d{2,3}-\d{7,8})|(1\d{10}))$"></div>
        </div>
  			<div class="cell">
          <div class="inline-div"><label style="float: left;" >备注</label>
          <textarea name="billRemark" maxLength="200"></textarea></div>
        </div>
  			<input type="hidden" name="userId">
  		</div>
  	</div>
  	<div class="btn-box">
      <!-- <div class="submit" onclick="sendForm()">确定</div> -->
  		<button class="submit" >确定</button>
      <div class="cancel" onclick="cancel()" >取消</div>
  	</div>
  </form>

  	<div class="cars-bg">
	  	<div class="cars">
	  		<div class="title">
	  			<span>选择品牌</span>
	  			<i class="cars-close"></i>
	  		</div>
	  		<div class="center">
	  			<div class="brand clearfix" >
		  			<div class="words"></div>
		  			<div class="brand-box" ></div>
		  		</div>
		  		<div class="car clearfix" style="display: none;"></div>
		  		<div class="model clearfix" style="display: none;"></div>
	  		</div>
	  		<div class="footer">
	  			<span>已选车型</span>
	  			<span class="pick-box"></span>
	  			<button class="brand-btn">确定</button>
	  		</div>
	  		
	  	</div>
  	</div>

    <div class="loading"></div>
  </body>
  <script type="text/javascript">
    var numAjax=0;
$(document).ajaxSuccess(function(evt, request, settings){  
    numAjax++;
    if (numAjax>=4) {
      $('.loading').hide()
    }
 }); 

    $('input[name="userId"]').val(userId);
  	var brandId = null;
  	var seriesId = null;
  	var modelId = null;
  	function initBrand(){
  		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl + "/controller/getGroupBrand",  // yii 控制器/方法
	      cache: false,      
	      // data: {tel: tel},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	         console.log(data);
	         if (data.code != 1) {
	         	return false
	         }

	        var resArr =  data.result;
	        var wordsHtml = "";
	        var brandHtml = "";
	        for (var i = 0; i < resArr.length; i++) {
	        	wordsHtml += '<span>'+resArr[i].initial+'</span>';
	        	var brandListHtml = '<ul class="brand-list">';
	        	var brandArr = resArr[i].brandInfo;
	        	for (var j = 0; j < brandArr.length; j++) {
	        		brandArr[j].brandLogo
	        		brandListHtml+='<li class="on" id="'+brandArr[j].brandId+'" onclick="showCars(this,id)"><i style="background-image: url('+brandArr[j].brandLogo+');"></i><span>'+brandArr[j].brandName+'</span></li>'

	        	}
	        	brandListHtml+='</ul>';
	        	brandHtml+=brandListHtml;
	        }
	        $('.brand-box').html(brandHtml);
	        $('.words').html(wordsHtml);
	        $('.words span').eq(0).addClass('on');
	        $('.brand-list').eq(0).show();


	        $('.words span').click(function(){
		  		$('.words span').removeClass('on');
		  		$(this).addClass('on');
		  		$('.brand-list').hide();
		  		$('.brand-list').eq($(this).index()).show();
		  	})


	      }
		});
		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl +"/controller/getMarketList",  // yii 控制器/方法
	      cache: false,      
	      data: {'marketId': 1},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	      	console.log(data);
	         if (data.code != 1) {
	         	return false
	         }
	         var resultArr = data.result;
	         var marketList = '<option value="">请选择</option>';
	         for (var i = 0; i < resultArr.length; i++) {
	         	marketList += '<option value="'+resultArr[i].marketId+'">'+resultArr[i].marketName+'</option>'
	         }
	         $('#marketSelect').html(marketList);
           if (marketId != 1 && marketId != '') {
            $('#marketSelect').val(marketId);
            $('#marketSelect').attr('disabled','disabled')
            $('#marketSelect').append('<input type="hidden" name="marketId" value="'+marketId+'"/>')
            setShopSelect(marketId);
           }
	      }
		});


		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl + "/controller/area/province",  // yii 控制器/方法
	      cache: false,      
	      // data: {tel: tel},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	      	console.log(data);
	         if (data.code != 1) {
	         	return false
	         }
	         var resultArr = data.result;
	         var provinceList = '<option value="">请选择</option>';
	         for (var i = 0; i < resultArr.length; i++) {
	         	provinceList += '<option value="'+resultArr[i].provinceId+'">'+resultArr[i].provinceName+'</option>'
	         }
	         $('#provinceSelect').html(provinceList);
	      }
		});

		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl+"/controller/getCarTypeList",  // yii 控制器/方法
	      cache: false,      
	      // data: {tel: tel},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	      	console.log(data);
	         if (data.code != 1) {
	         	return false
	         }
	         var resultArr = data.result;
	         var carTypeList = "";
	         for (var i = 0; i < resultArr.length; i++) {
	         	carTypeList += '<option value="'+resultArr[i].carTypeId+'">'+resultArr[i].carTypeName+'</option>'
	         }
	         $('#carTypeSelect').html(carTypeList);

	      }
		});
  	}
  	initBrand();


  	$('#marketSelect').change(function(){
      var _thisMarketId = $(this).val()
      setShopSelect(_thisMarketId);
  	});
    function setShopSelect(marketId){
      $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl + "/controller/getShopList",  // yii 控制器/方法
        cache: false,      
        data: {'marketId': marketId},  //传送的数据
        error:function(){
           alert("数据传输错误");
        },success: function (data) {
          console.log(data);
           if (data.code != 1) {
            return false
           }
           var resultArr = data.result;
           var shopList = "";
           for (var i = 0; i < resultArr.length; i++) {
            shopList += '<option value="'+resultArr[i].shopId+'">'+resultArr[i].shopName+'</option>'
           }
           $('#shopSelect').html(shopList);
        }
      });
    }
  	$('#provinceSelect').change(function(){
  		console.log($(this).val());
  		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl+"/controller/area/city",  // yii 控制器/方法
	      cache: false,      
	      data: {'provinceId': $(this).val()},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	      	console.log(data);
	         if (data.code != 1) {
	         	return false
	         }
	         var resultArr = data.result;
	         var cityList = "";
	         for (var i = 0; i < resultArr.length; i++) {
	         	cityList += '<option value="'+resultArr[i].cityId+'">'+resultArr[i].cityName+'</option>'
	         }
	         $('#citySelect').html(cityList);
	      }
		});

  	})













  	function showCars(_this,id){
  		brandId = id;
  		$('.pick-box').append('<span class="cars-pick brand-pick"><span>'+_this.getElementsByTagName('span')[0].innerHTML+'</span><i class="delete"></i></span>');
  		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl+"/controller/getSeriesList",  // yii 控制器/方法
	      cache: false,      
	      data: {'brandId': id},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	      	console.log(data);
	      	if (data.code != 1) {
	         	return false
	        }

	      	var resultArr = data.result;
	      	var seriesHtml = "";
	      	for (var i = 0; i < resultArr.length; i++) {
	      		seriesHtml += '<span class="series-list" id="'+resultArr[i].seriesId+'" onclick="showModel(this,id)">'+resultArr[i].seriesName+'</span>';
	      	}

	      	$('.cars .title span').html('选择车系');

	      	$('.car').html(seriesHtml);
	      	$('.brand').hide();
	      	$('.car').show();

	      }
	  });
  	}

  	function showModel(_this,id){
  		console.log(id);
  		seriesId = id;
  		$('.pick-box').append('<span class="cars-pick series-pick"><span>'+_this.innerHTML+'</span><i class="delete"></i></span>');
  		$.ajax({
	      type: "get",      //data 传送数据类型。post 传递
	      dataType: 'json',  // 返回数据的数据类型json
	      url: defaultUrl+"/controller/getModelList",  // yii 控制器/方法
	      cache: false,      
	      data: {'seriesId': id},  //传送的数据
	      error:function(){
	         alert("数据传输错误");
	      },success: function (data) {
	      	console.log(data);
	      	if (data.code != 1) {
	         	return false
	        }

	      	var resultArr = data.result;
	      	var modelHtml = "";
	      	for (var i = 0; i < resultArr.length; i++) {
	      		modelHtml += '<span class="model-list" id="'+resultArr[i].modelId+'" onclick="selectModel(this,id)">'+resultArr[i].modelName+'</span>';
	      	}
	      	$('.cars .title span').html('选择车型');
	      	$('.model').html(modelHtml);
	      	$('.car').hide();
	      	$('.model').show();

	      }
	  });
  	}

  	function selectModel(_this,id){
  		console.log(id);
  		modelId = id;
  		if ($('.cars-pick').length >=3) {
  			$('.model-pick span').html(_this.innerHTML);
  		}else{
  			$('.pick-box').append('<span class="cars-pick model-pick"><span>'+_this.innerHTML+'</span><i class="delete"></i></span>');
  		}
  		
  	}
  	$(document).on("click",".brand-pick .delete",function(){  
    	$('.brand-pick').remove();
    	$('.series-pick').remove();
    	$('.model-pick').remove();
    	$('.car').hide();
    	$('.model').hide();
    	$('.brand').show();
    	$('.cars .title span').html('选择品牌');
    });
  	$(document).on("click",".series-pick .delete",function(){  
    	// $('.brand-pick').remove();
    	$('.series-pick').remove();
    	$('.model-pick').remove();
    	$('.car').show();
    	$('.model').hide();
    	$('.brand').hide();
    	$('.cars .title span').html('选择车系');
    });
    $(document).on("click",".model-pick .delete",function(){  
    	// $('.brand-pick').remove();
    	// $('.series-pick').remove();
    	$('.model-pick').remove();
    	$('.car').hide();
    	$('.model').show();
    	$('.brand').hide();
    });
    $('.brand-btn').click(function(){
    	$('.cars-bg').hide();
    	$('.brand-input').val($('.brand-pick span').html()+$('.series-pick span').html()+$('.model-pick span').html());
    	$('.brandId-input').val(brandId);
    	$('.seriesId-input').val(seriesId);
    	$('.modelId-input').val(modelId);
    	// alert(modelId);
    });
    $('.brand-input').click(function(){
    	$('.cars-bg').show();
    });
    $('.cars-close').click(function(){
    	$('.cars-bg').hide();
    })
  	
    function sendForm(){
      if ($('select[name=provinceId]').val() == '' || $('select[name=cityId]').val() == '') {
        alert('请选择转入地车管所');
        return false;
      }
      $.ajax({
          url:defaultUrl +"/controller/insertSaleBill",
          data:$('form').serialize(),
          dataType:"json",
          error:function(data){
              console.log(data);
              alert(data.msg);
          },
          success:function(data){
              console.log(data);
              
              if (data.code != 1) {
                alert(data.msg);
                return false
              }

              window.history.go(-1);

          }
      });  
      return false;    
    }
    function cancel(){
     window.history.go(-1);
    }
    function checkVin(ele){
      var str = $(ele).val().toLocaleUpperCase().replace(/\s|I|O|Q/g, "");
      $(ele).val(str);
      if (str.length == 17) {
        $('.loading').show()
        $.ajax({
            type: "get",      //data 传送数据类型。post 传递
            dataType: 'json',  // 返回数据的数据类型json
            url: defaultUrl+"/controller/getCarList",  // yii 控制器/方法
            cache: false, 
            data:{'marketId':1,'carVin':str},
            // async:false,
            error:function(){
               alert("数据传输错误");
            },success: function (data) {
              console.log(data);
               if (data.code != 1) {
                return false
               }
               if (data.result.length >0) {
                  var carInfo = data.result[0];
                  $('select[name=marketId]').val(carInfo.marketId);
                  setShopSelect(carInfo.marketId);
                  $('select[name=shopId]').val(carInfo.shopId);
                  $('select[name=carTypeId]').val(carInfo.carTypeId);
                  $('select[name=billCarColor]').val(carInfo.carOutColor);
                  $('input[name=seriesId]').val(carInfo.seriesId);
                  $('input[name=modelId]').val(carInfo.modelId);
                  $('input[name=brandId]').val(carInfo.brandId);
                  $('.brand-input').val(carInfo.carTitle);
                  $('input[name=billCarName]').val(carInfo.brand.brandName+carInfo.series.seriesName);
               }else{
                layer.msg('暂无该车辆信息!', {icon: 2});
               }
               // editCars.carConfList = data.result;
            }
        });

      }
      
    }

  </script>
</html>


































